<template>
  <section>
    <div class="info">
      <p class="photo"><img :src="'https://i.hunnu.edu.cn/ums/avatar/' + userInfo.userAccount" alt="" /></p>
      <div>
        <h3>{{userInfo.userName}}</h3>
        <span >{{userInfo.unionName}} | {{userInfo.position}}</span>
      </div>
      <!-- <span>扫码签到</span> -->
    </div>

    <ul>
      <li @click="isJump('activityList','myActivity')">
        <img src="@/mobile/imgs/my-1.png" alt="" />
        <p>我的活动</p>
      </li>

      <li  @click="isJump('difficultyHelp','DifficultAllowance')">
        <img src="@/mobile/imgs/my-2.png" alt="" />

        <p>困难帮扶</p>
      </li>

      <li  @click="isJump('MySMTMAAF')">
        <img src="@/mobile/imgs/my-3.png" alt="" />

        <p>补充医疗互助</p>
      </li>

      <!-- <li @click="$troute.query('myProposal')">
        <img src="@/mobile/imgs/my-4.png" alt="" />

        <p>教代会提案</p>
      </li> -->
    </ul>

    <div class="verify" v-if="identity.isSUnionManager || identity.isUnionManager">
      <p class="shenhe">我的审核</p>

      <ul>
        <li @click="$troute.query('memberRegistration')">
          <i class="iconfont icon-huiyuan"></i>

          <p>会员审核</p>
        </li>

        <li @click="$troute.query('difficultyHelpAudit')">
          <i class="iconfont icon-bangfujiuzhu"></i>

          <p>困难帮扶审核</p>
        </li>

        <li @click="$troute.query('SMTMAAFAudit')">
          <i class="iconfont icon-baoming2"></i>

          <p>补充医疗互助</p>
        </li>

        <!-- <li @click="$troute.query('activitys')">
          <i class="iconfont icon-huodong1"></i>

          <p>待审活动</p>
        </li> -->
      </ul>
    </div>

    <van-cell-group>
      <van-cell title="个人信息" is-link @click="$troute.query('mmDetail',userInfo.userId)">
        <template #icon>
          <span class="icon icon-1"
            ><img src="@/mobile/imgs/my-5.png" alt=""
          /></span>
        </template>
      </van-cell>
      <!-- <van-cell title="我的消息" is-link to="/myMessage">
        <template #icon>
          <span class="icon icon-2"
            ><img src="@/mobile/imgs/my-6.png" alt=""
          /></span>
        </template>
      </van-cell>
      <van-cell title="设置" is-link to="">
        <template #icon>
          <span class="icon icon-3"
            ><img src="@/mobile/imgs/my-7.png" alt=""
          /></span>
        </template>
      </van-cell> -->
      <van-cell title="退出登录" is-link @click="loginOut">
        <template #icon>
          <span class="icon icon-3"
            ><img src="@/mobile/imgs/my-7.png" alt=""
          /></span>
        </template>
      </van-cell>
    </van-cell-group>
    <tabbar :index='index'/>
  </section>
</template>

<script>
import api from "@/data/api/index.js";
import Vue from "vue";
import { Cell, CellGroup } from "vant";
import tabbar from "../../components/tabbar.vue";
import {mapState} from "vuex";

Vue.use(Cell);
Vue.use(CellGroup);

export default {
  components: { tabbar },
  data(){
    return{
      userInfo: {},
      index: 2,
      identity: {}
    }
  },
  created(){
    this.userInfo = JSON.parse(sessionStorage.getItem("user"))
    this.identity = JSON.parse(sessionStorage.getItem("jurisdiction"));
  },
  methods: {
    isShow:function (path){
      const show = this.menus.findIndex((value) => {
        return value == path
      })
      return show!=-1?true:false
    },
    isJump:function (path,topath){
      let link=!topath?path:topath
      if(this.isShow(path)){
        this.$troute.query(link)
      }else {
        this.$toast('没有权限')
      }
    },
    loginOut(){
      api.logOut().then(res => {
        sessionStorage.clear()
        // this.$router.replace('/login')
        // console.log(res)
        window.location.href =
          "https://oauth2.hunnu.edu.cn/logout?client_id=a371fd7a-dc3a-4c10-8f6e-206eb4fac866&redirect_uri=http://union.hunnu.edu.cn/api/oauth2";
      });
    },
  },
  computed:{
    ...mapState({
      menus: "menus"
    }),
  }
};
</script>

<style lang="scss" scoped>
section {
  padding: 20px 0;
  .info {
    position: relative;
    margin: 0 16px;
    height: 65px;
    .photo {
      float: left;
      border-radius: 50%;
      background: #e3ddc7;
      // border: 1px solid #ccc;
      overflow: hidden;
      img {
        width: 65px;
        height: 65px;
      }
    }
    div {
      margin-left: 80px;
      h3 {
        font-size: 20px;
        font-weight: normal;
      }
      span {
        display: inline-block;
        margin-top: 5px;
        color: #fff;
        font-size: 12px;
        padding: 5px 15px;
        border-radius: 20px;
        background: linear-gradient(#feb692, #ea5455);
      }
    }
    > span {
      position: absolute;
      top: 15px;
      right: 0;
      color: #fff;
      font-size: 13px;
      padding: 5px 10px;
      background: #e20010;
      border-radius: 25px 0 0 25px;
    }
  }
  > ul {
    padding: 0 15px;
    overflow: hidden;
    li {
      float: left;
      margin: 25px 0;
      width: 25%;
      text-align: center;
      img {
        height: 30px;
      }
      p {
        margin-top: 10px;
      }
    }
  }
  > ul:nth-of-type(1){
    padding-bottom: 0;
  }
  .verify {
    padding: 0 16px;
    margin-bottom: 30px;
    background-color: rgb(253,115,79);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    .shenhe{
      font-size: 20px;
      padding-top: 15px;
    }
    p{
      color: #fff; 
    }
    }
    ul{
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width: 25%;
        text-align: center;
        margin-top: 15px;
        i{
          color: #fff;
          font-size: 22px;
        }
        p{
          padding-top: 6px;
        }
      }
    }
  .icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%;
    background: #eee;
    img {
      height: 14px;
    }
  }
  .icon-1 {
    background: #fcd766;
  }
  .icon-2 {
    background: #ffdfde;
  }
  .icon-3 {
    background: #96e4ee;
  }
}
</style>